<template>
	<view class="search">
		<!-- #ifdef MP-WEIXIN -->
		<title :center="false" @titleHeight='setPaddingTop' title="搜索" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
		 @toclick="toBack(1)" icon="/static/img/other/to-back.png"></title>
		<!-- #endif -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="search-top" :style="{'padding-top': height + 'px'}">
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="search-top">
		<!-- #endif -->
			<view class="search-top-main">
				<u-search placeholder="搜索电影,影院" v-model="keyword" :focus='true' class="search-btn" @change='debounce' @search="getSearch" @custom="getSearch"></u-search>
			</view>
		</view>
		<view class="search-data-list" :style="{'padding-top': boxHeight + 'px'}">
			<view class="search-data-card" v-if="searchData.movie.rows.length > 0">
				<view class="card-title">正在热映</view>
				<movice-item :list="searchData.movie.rows" :is-search="true"></movice-item>
			</view>
			<view class="search-data-card" v-if="searchData.coming.rows.length > 0">
				<view class="card-title">即将上映</view>
				<movice-item :list="searchData.coming.rows" :isComing="true" :is-search="true" @change="upDataList"></movice-item>
			</view>
			<view class="search-data-card" v-if="searchData.cinema.rows.length > 0">
				<view class="card-title">影院</view>
				<view class="cinema-item">
					<cinema-item v-for="(item, index) in searchData.cinema.rows" :key="index" :item="item" :is-search="true" @click="movie_tiao"></cinema-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import moviceItem from '@/pages/components/index/movice-item.vue'
	import cinemaItem from '@/pages/components/cinema/cinema-item.vue'
	export default {
		data() {
			return {
				height: 0,
				boxHeight: 0,
				//搜索内容
				keyword: '',
				//搜索数据
				searchData: {
					cinema: {
						count: 0,
						rows: []
					},
					coming: {
						count: 0,
						rows: []
					},
					movie: {
						count: 0,
						rows: []
					}
				}
			};
		},
		components: {
			title,
			moviceItem,
			cinemaItem
		},
		onShow() {
			// #ifdef MP-TOUTIAO
			this.$nextTick(() => {
				this.getDom()
			})
			// #endif
			this.getLocalCity()
		},
		methods: {
			setPaddingTop(data){
				this.height = data.height
				this.$nextTick(()=>{
					this.getDom()
				})
			},
			// // 设置盒子高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				// console.log('query',query);
				query.selectAll('.search-top').boundingClientRect(res => {
					// console.log('search-top',data);
					this.boxHeight = res[0] ? res[0].height : 0
				}).exec()
			},
			debounce(){
				this.$common.inputDebounce(this,this.getSearch)
			},
			// 返回
			toBack(index) { 
				this.$common.toBack(index)
			},
			// 搜索
			getSearch() {
				if(this.keyword == '') {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '搜索词不能为空'
					// })
					for (let key in this.searchData) {
						this.searchData[key].count = 0
						this.searchData[key].rows = []
					}
					return false
				}
				uni.showLoading({
					title: '搜索中'
				})
				this.$api.getSearch({
					s: this.keyword,
					cid: this.$store.state.chooseLoc.id || this.$store.state.locCity.id,
					lat: this.$store.state.locCity.lat || uni.getStorageSync('loc')?JSON.parse(uni.getStorageSync('loc')).lat:null,
					lng: this.$store.state.locCity.lng || uni.getStorageSync('loc')?JSON.parse(uni.getStorageSync('loc')).lng:null
				}).then(res => {
					this.searchData = res.data.data
					this.searchData.cinema.rows.forEach((item, index) => {
						if (typeof this.searchData.cinema.rows[index].hall_type == 'string') {
								item.hall_type = item.hall_type.length > 0 ? item.hall_type.split(',') : []
						}
					})
					uni.hideLoading()
				})
			},
			// 电影跳转
			movie_tiao(item) {
				// console.log(item)
				uni.navigateTo({
					url: `/subpages/buymovie/buymovie?cid=${item.cid}&cinemaId=${item.cinemaid}&mid=${-1}&dates=${this.$options.filters['formateDate'](new Date, 'YYYY-MM-DD')}`
				})
			},
		
			// 想看点击后的数据更新
			upDataList(like, index) {
				0 == like 
				? (this.searchData.coming.rows[index[1]].isLike = 1, this.searchData.coming.rows[index[1]].wish++)
				: (this.searchData.coming.rows[index[1]].isLike = 0, this.searchData.coming.rows[index[1]].wish--)
			},
			
			// 处理定位信息
			dealLocation(locaCity){
				// 当前获取的定位城市信息，可以直接重置
				// this.$store.commit('setLocCity', locaCity)
				// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				if(uni.getStorageSync('loc')==''){
					this.$store.commit('setLocCity', locaCity)
					uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				}
				// let chooseloc = uni.getStorageSync('chooseloc') ? JSON.parse(uni.getStorageSync('chooseloc')) : null
				let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
				if(!chooseloc || chooseloc.nm == locaCity.nm){//没有选择城市或选择城市等于定位城市
					this.$store.commit('setChooseLoc', locaCity)
					uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
				}else{
						if(this.toggleCity){//避免重复弹窗
						this.toggleCity = false;
						let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')));
						// let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')));
							uni.showModal({
								title: '切换城市',
								content: `定位到您在${locaCity.nm},是否切换？`,
								success:(res) =>{
									if (res.confirm) {
										// 添加入定位城市数据
										this.$store.commit('setLocCity', locaCity)
										uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
										// 添加入选择城市数据
										this.$store.commit('setChooseLoc', locaCity)
										uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
									} else if (res.cancel) {
										// this.$store.commit('setChooseLoc',chooseloc)
										// ----不加下面的代码有bug【首页中定位不同时不选择切换城市=》在电影-影院 中无法查询出初始影院列表】。原因不明
										let loc = uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc'))
										this.$store.commit('setLocCity', loc)
										uni.setStorageSync('loc', JSON.stringify(loc))
										// --------------------------------------------------------------
									}
								},
								complete:()=>{
									this.toggleCity = true;
								}
							});
						}	
				}
				// console.log('locaCity',locaCity)
				// console.log('chooseloc',chooseloc)
			},
			//获取当前定位
			getLocalCity() {
				// this.$store.state.chooseLoc
				this.$common.getNowLocation((result) => {
					this.$api.getLocalCity({
						lat: result.latitude,
						lng: result.longitude,
					}).then(res => {
						let locaCity = {
							...res.data.data,
							lat: result.latitude,
							lng: result.longitude
						}
						
						this.dealLocation(locaCity)
					})
				}, (error) => {
					// let locaCity = {"id":-1,"nm":"定位失败","detail":"定位未开启","update_time":1614405365767,"lat":null,"lng":null}
					let chooseLoc = {
						"id": 2,
						"nm": "北京",
						"update_time": new Date().getTime() * 1000
					}
					// this.$store.commit('setLocCity', locaCity)
					this.$store.commit('setChooseLoc', chooseLoc)
					// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
					uni.setStorageSync('chooseloc', JSON.stringify(chooseLoc))
				}, true)
			},
			// ------------------------------------------------------------------------
		},
		
	}
</script>

<style lang="scss" scoped>
	.search {
		position: relative;
		z-index: 1;
		height: 100vh;
		background-color: #F9F9F9;

		.search-top {
			background-color: #FFF;
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 5;
			
			.search-top-main {
				background-color: #fff;
				padding: 20rpx 20rpx;

				.search-btn {
					box-sizing: border-box;

					/deep/.u-search {
						.u-action {
							background-image: linear-gradient(45deg, #f43f3b, #ec008c);
							width: 100rpx;
							height: 60rpx;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 40rpx;
							border-radius: 30rpx;
							font-size: 24rpx;
							box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2)
						}
					}
				}
			}
		}

		.search-data-list {
			.search-data-card {
				margin-bottom: 40rpx;
				background-color: #FFF;
				
				&:last-of-type {
					margin-bottom: 0;
				}
				.card-title {
					font-weight: 700;
					font-size: 32rpx;
					padding: 20rpx 40rpx;
					color: #333;
					border-bottom: 2rpx solid #F3F3F3;
				}
				.cinema-item {
					border-bottom: 2rpx solid #F3F3F3;
					/deep/.cineme-item-style {
						padding: 0 40rpx;
					}
				}
			}
		}
	}
</style>
